CSS コンテナークエリーを完全理解する
日時：2024年5月18日
コンテナークエリーは、メディアクエリーの代替となるもので、ビューポートサイズや他の端末の特性に基づいて要素にスタイルを適用します。 code:html
<style>
.post {
container-type: inline-size;
}
.card h2 {
font-size: 1em;
}
@container (min-width: 700px) {
.card h2 {
font-size: 2em;
}
}
</style>
<body>
<div class="post">
<div class="card">
<h2>カードのタイトル</h2>
<p>カードのコンテンツ</p>
</div>
</div>
</body>
もっともシンプルなコンテナは上記
sizeとinline-sizeの違い？
横幅か縦横幅かを選ぶ
700pxを起点にしているので715pxで切り替わるの何故？
普通にbodyにマージンがあったからだ。
リセットCSSいれていないからdefaultで両サイドに8pxずつ入っててそれのせい
safariだと問題ない
むしろこっちだと間隔がないのか。。
https://scrapbox.io/files/6648b3cdb073cd001d5a2750.mov
別にサイズだけではないみたい
containerという一括設定できるメソッドもある
本当にメディアクエリの代替にできそうかやってみるか
よくあるサイドナビ、メイン要素でメインの中にカードが並んでいるようなUIをコンテナクエリーで実装してみる
その前に一旦Next.jsの初期起動画面がメディアクエリベースになっているのでこれをコンテナクエリーに移行してみるか Nextの初期セットアップ画面で不要なCSSあったかも
後でコントリビュートするか
何が嬉しいのか
メディアクエリはビュー全体の幅や高さに依存してしまうので細かなスタイリングが厳しい コンテナクエリーだと要素の幅と高さを起点にできるのでもっと細かなコンポーネント思考でのスタイリングができる